<template>
  <div>
    <div class="btns">
      <button @click="addClass">新增类目</button>
      <button @click="uploadFile">上传图片</button>
    </div>
    <div class="imageInfo">
      <ul class="imageTab" v-loading="loading">
        <li
          v-for="(item, index) in imageList"
          :key="item.id"
          @click="getImageId(item.id, index, item.name, item.order)"
          :class="['className', { active: activeId === index }]"
        >
          <span>{{ item.name }}</span>
          <div class="liBtns">
            <el-button text @click="edit(index)">
              <el-icon>
                <Edit />
              </el-icon>
            </el-button>
            <el-button text @click="removeType(item.id)">
              <el-icon><Close /></el-icon>
            </el-button>
          </div>
        </li>
        <li class="changePage">
          <el-pagination
            background
            layout="prev, next"
            :total="total"
            :page-size="limit"
            :current-page="currentPage"
            @current-change="changePage"
          />
        </li>
      </ul>
      <div class="images">
        <ul v-loading="loading">
          <li v-for="item in images" :key="item.id">
            <img :src="item.url" alt="image" />
          </li>
        </ul>
      </div>
    </div>
    <AddClassDrawer ref="addDrawer" title="新增类目"></AddClassDrawer>
    <UploadFileDrawer ref="uploadImage" title="上传文件"></UploadFileDrawer>
    <Drawer ref="editDrawer" title="修改类目" @submit="editItem(imageId.value)">
      <el-form :rules="rules" :model="formInline">
        <el-form-item label=" 修改类目名称name：" prop="className">
          <el-input
            type="text"
            class="addClassName"
            :placeholder="oldName"
            v-model="formInline.className"
          >
          </el-input>
        </el-form-item>
        <el-form-item label=" 修改排序order：" prop="classSort">
          <el-input
            type="text"
            class="addClassSort"
            :placeholder="oldOrder"
            v-model="formInline.classSort"
          >
          </el-input>
        </el-form-item>
      </el-form>
    </Drawer>
  </div>
</template>

<script setup>
import { toast } from "@/utils/index.js";
import { tips } from "@/utils/index.js";
import { ref,reactive } from "vue";
import {
  getImageList,
  getImage,
  editImageClass,
  removeImageClass,
} from "@/api/images.js";
import AddClassDrawer from "@/views/imageList/AddClassDrawer.vue";
import UploadFileDrawer from "@/views/imageList/UploadFileDrawer.vue";
import Drawer from "@/views/imageList/Drawer.vue";
const formInline = reactive({
  className: "",
  classSort: "",
});
const rules = reactive({
  className: [
    {
      required: true,
      message: "请输name",
      trigger: "blur",
    },
  ],
  classSort: [
    {
      required: true,
      message: "请输入order",
      trigger: "blur",
    },
  ],
});
const activeId = ref(0);
const loading = ref(false);
const total = ref(0);
const limit = ref(10);
const currentPage = ref(1);
const addDrawer = ref(null);
const uploadImage = ref(null);
const imageList = ref([]);
const images = ref([]);
const imageId = ref();
const editDrawer = ref(null);
const imageTypeName = ref("");
const imagesOrder = ref(0);
const oldName = ref("");
const oldOrder = ref(0);
const changePage = (pageNum) => {
  console.log(pageNum);
  getImageListData(pageNum);
};
const getImageListData = (page) => {
  loading.value = true;
  getImageList(page)
    .then((res) => {
      console.log(res);
      imageList.value = res.list;
      imageList.value.forEach((item, index) => {
        if (index === 0) {
          getImageId(item.id);
        }
      });
      total.value = res.totalCount;
      currentPage.value = page;
    })
    .catch((err) => {
      console.log(err);
    })
    .finally(() => {
      loading.value = false;
    });
};
getImageListData();
function getImageId(id, index, typeName, imageOrder) {
  imageId.value = id;
  activeId.value = index;
  imageTypeName.value = typeName;
  imagesOrder.value = imageOrder;
  // console.log(imageTypeName.value);
  // console.log(imagesOrder.value);
  getImage(imageId.value)
    .then((res) => {
      console.log(res);
      images.value = res.list;
    })
    .catch((err) => {
      console.log(err);
    });
  console.log(imageId.value);
  console.log(id);
}
const addClass = () => {
  addDrawer.value.open();
};
const uploadFile = () => {
  uploadImage.value.open();
};
function editItem(id){
  // const {name,id,order} = imageList.value[index];
  // oldName.value = name;
  // oldOrder.value = order
  editDrawer.value.open();
  // editDrawer.value.editImageClass2(id);
  console.log("222");
  editImageClass(id,formInline.className,formInline.classOrder).then((res)=>{
    console.log(res);
  }).catch((err)=>{
    console.log(err);
  })
}
const edit = (index) => {
  const { name, id } = imageList.value[index];
  oldName.value = name;
  oldOrder.value = id;
  editDrawer.value.open();
  const res = editDrawer.value.formInline.className;
  console.log(res);
};
function removeType(id) {
  tips("您确认要删除吗？")
    .then(() => {
      toast("删除成功！");
    })
    .catch(() => {
      toast("您取消了删除！");
    });
  removeImageClass(id)
    .then((res) => {
      console.log(res);
    })
    .catch((err) => {
      console.log(err);
    });
}
// function logoutHandel() {
//   tips("您确认要退出吗？")
//     .then(() => {
//       const token = getToken();
//       logout(token).then(() => {
//         removeToken();
//         toast("退出登录成功！");
//         store.$reset();
//         router.push("/login");
//         console.log("退出登录");
//       });
//     })
//     .catch(() => {
//       toast("您取消了退出登录！");
//     });
// }
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
ul,
li {
  list-style: none;
}
.imageTab {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-right: 20px;
}
.imageTab > .className {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
  padding: 0px 10px;
  width: 130px;
  line-height: 50px;
  background: aqua;
  border-radius: 10px;
}
.imageTab > .className:hover {
  transform: scale(1.1, 1.1);
  /* background: salmon; */
}
.changePage {
  font-size: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 145px;
  height: 50px;
  background: skyblue;
  border-radius: 10px;
}
img {
  display: block;
  width: 200px;
  height: 200px;
  background: salmon;
  margin-right: 10px;
  margin-bottom: 10px;
}
.images > ul {
  display: flex;
  flex-wrap: wrap;
}
.imageInfo {
  display: flex;
}
.btns {
  margin-bottom: 10px;
  margin-top: 0px;
}
.imageTab > .active {
  background: salmon;
}
.btns > button {
  border: none;
  background: aquamarine;
  width: 100px;
  height: 50px;
  margin-right: 20px;
  border-radius: 10px;
  font-size: 16px;
}
.btns > button:hover {
  transform: scale(1.1, 1.1);
  background: salmon;
}
</style>
